<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>

</head>
<body>
  <input type="button" value="append" id="btnAppend"/>
  <input type="button" value="prepend" id="btnPrepend"/>
  <input type="button" value="after" id="btnAfter"/>
  <input type="button" value="before" id="btnBefore"/>
  <input type="button" value="appendTo" id="btnAppendTo"/>
  <ul id="ul1">
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li id="li3" style="color: blue;">我是第3个li标签</li>
    <li>我是第4个li标签</li>
    <li>我是第5个li标签</li>
  </ul>

  <ul id="ul2">
    <li>我是第1个li标签2</li>
    <li>我是第2个li标签2</li>
    <li id="li32" style="color: red;">我是第3个li标签2</li>
    <li>我是第4个li标签2</li>
    <li>我是第5个li标签2</li>
  </ul>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    /*追加自身的最后面  传对象和html格式代码*/
    // append;  父元素添加子元素的方法
    $('#btnAppend').click(function(){
      // var $liNew = $('<a>我是新创建的a标签</a>')
      // $('#ul1').append($liNew) //加载到盒子里的最后一位
      var $liNew = $('#li3')
      $('#ul1').append($liNew) //先切割后加载到盒子里的最后一位
    })
    // prepend(); 父元素添加子元素的方法
      $('#btnPrepend').click(function(){
      //   var $liNew = $('<a>我是新创建的a标签</a>')
      // $('#ul1').prepend($liNew) //加载到盒子里的第一位
      var $liNew = $('#li32')
      $('#ul2').prepend($liNew) //加载到盒子里的第一位  先剪切在复制
      })
    // appendTo();子元素向父元素添加 添加到最后一位
    $('#btnAppendTo').click(function(){
      //   var $liNew = $('<a>我是新创建的a标签</a>')
      // $('#ul1').prepend($liNew) //加载到盒子里的第一位
      var $liNew = $('#li32')
      $($liNew).appendTo('#ul2') //加载到盒子里的第一位  先剪切在复制
      })
    // after(); 添加同级元素的方法    在同级的后面
    $('#btnAfter').click(function(){
      var $liNew = $('<a>我是新创建的a标签</a>')
      $('#ul1').after($liNew) //加载到盒子里的最后一位
    })
    // before();添加同级元素的方法  在同级的前面
    $('#btnBefore').click(function(){
      var $liNew = $('<a>我是新创建的a标签</a>')
      $('#ul1').before($liNew) //加载到盒子里的前面一位
    })


  });
</script>